<template>

  <el-dialog
    top="20px"
    :title="defaultValue.title"
    :visible="tableConfig.show"
    :show-close="tableConfig.showClose"
    @close="tableConfig.show = false"
    :destroy-on-close="tableConfig.destroyOnClose"
    width="1100px">

    <div slot="title" class="dialog-title">
      <el-row>
        <el-col :span="20">
          <span style="font-size: 18px;color: #303133">详情</span>
        </el-col>
        <el-col :span="3">
          <el-button type="warning" size="mini" @click="oneClickUnbindingTips">一键解绑</el-button>
        </el-col>
        <el-col :span="1">
          <!--<i @click="tableConfig.show = false" class="el-icon-close" style="font-size: 18px;cursor:pointer;"></i>-->
        </el-col>
      </el-row>
    </div>

    <el-row>
      <el-col :span="24">
        <span style="margin-left: 20px;">收入(去除不入账): <span style="color: red">{{receipt}}</span> 元 | 支出(去除不入账): <span style="color: #67C23A">{{expense}}</span> 元</span>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <span style="margin-left: 20px;">总收入: <span style="color: red">{{receiptEntry}}</span> 元 | 总支出: <span style="color: #67C23A">{{expenseEntry}}</span> 元</span>
      </el-col>
    </el-row>

    <br/>

    <!--列表-->
    <el-table
      :data="billTable.data"
      max-height="630px"
      height="630px"
      style="width: 100%">

      <el-table-column
        prop="purpose"
        label="款项名称"
      >
      </el-table-column>

      <el-table-column
        prop="price"
        label="价格"
      >
      </el-table-column>

      <el-table-column
        prop="triggerTime"
        label="款项发生时间"
      >
      </el-table-column>

      <el-table-column
        prop="incomeOrExpenditure"
        label="支出or收入"
      >
        <template slot-scope="scope">
          <el-tag type="info" size="mini" v-if="scope.row.incomeOrExpenditure === 1">支出</el-tag>
          <el-tag type="danger" size="mini" v-else-if="scope.row.incomeOrExpenditure === 2">收入</el-tag>
          <el-tag type="info" size="mini" v-else >-</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        prop="entry"
        label="是否入账记录"
      >
        <template slot-scope="scope">
          <el-tag type="info" size="mini" v-if="scope.row.entry === 1">不入账</el-tag>
          <el-tag type="warning" size="mini" v-else-if="scope.row.entry === 2">入账</el-tag>
          <el-tag type="info" size="mini" v-else >-</el-tag>
        </template>
      </el-table-column>

    </el-table>

    <!--分页部分-->
    <el-pagination
      style="width:33%; margin-right:10px; margin-top:10px;"
      background
      layout="total, prev, pager, next, jumper"
      @current-change="billCurrentChange"
      :page-size="pageConfig.size"
      :current-page="pageConfig.current"
      :pager-count="5"
      :total="pageConfig.total">
    </el-pagination>

  </el-dialog>



</template>

<script>

  import http from '@/utils/http'

  export default {
    name: "BillingGroupData",
    data(){
      return {
        // 默认值，进入页面后的值
        defaultValue: {
          // 弹出框标题
          title: '详情',
        },
        // 表格的默认值
        tableConfig: {
          // 关闭时销毁 Dialog 中的元素
          destroyOnClose: true,
          // 弹出框是否打开
          show: false,
          // 是否显示关闭按钮
          showClose: true,
        },
        // 表格数据
        billTable: {
          data: [],
        },
        // 分页参数
        pageConfig: {
          // 每页记录数
          size: 30,
          // 当前页码
          current: 1,
          // 总记录数
          total: 0,
        },
        // 账单组ID
        billGroupId: null,
        // 收入(不含不入账)
        receipt: null,
        // 支出(不含不入账)
        expense: null,
        // 收入(含不入账)
        receiptEntry: null,
        // 支出(含不入账)
        expenseEntry: null,
      }
    },
    methods: {
      /**
       * 进入弹框页面之前
       * @param id 账单组ID
       */
      beforeEnteringPage(id){
        this.billGroupId = id
        this.getBillingGroupBindingBill()
        this.getGroupExpenditureInfo()
        this.getGroupExpenditureInfoEntry()
        this.tableConfig.show = true
      },
      /**
       * 确定弹框
       */
      oneClickUnbindingTips(){
        this.$confirm('是否确认一键解绑，注意，解绑后无法找回对应关系?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 确定删除
          this.oneClickUnbinding()

        }).catch(() => {
          // 取消删除
        });
      },
      /**
       * 获取账单组支出情况统计
       */
      getGroupExpenditureInfo(){
        http.post("/bill/getGroupExpenditureInfo", {
          billGroupId: this.billGroupId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.receipt = res.data.income
          this.expense = res.data.expenditure

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 获取账单组支出情况统计
       */
      getGroupExpenditureInfoEntry(){
        http.post("/bill/getGroupExpenditureInfoEntry", {
          billGroupId: this.billGroupId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.receiptEntry = res.data.income
          this.expenseEntry = res.data.expenditure

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 一键解绑
       */
      oneClickUnbinding(){
        http.post("/bill/oneClickUnbinding", {
          id: this.billGroupId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          this.getBillingGroupBindingBill()
          this.$message.success("解绑成功");

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
      /**
       * 分页被改变的时候
       * @param value 当前页
       */
      billCurrentChange(value){
        this.pageConfig.current = value
        this.getBillingGroupBindingBill()
      },
      /**
       * 根据账单组ID查询绑定的账单
       */
      getBillingGroupBindingBill(){
        http.post("/bill/getBillingGroupBindingBill", {
          current: this.pageConfig.current,
          size: this.pageConfig.size,
          id: this.billGroupId
        }).then(response => {
          let res = response.data;
          if (res.status === 'error'){
            if (res.code !== 401){
              this.$message.error(res.msg);
            }
            return
          }
          // 分页数据
          let data = res.data;
          this.pageConfig.total = data.total;
          this.pageConfig.current = data.current;
          this.pageConfig.size = data.size;
          // 处理数据
          this.billTable.data = data.records

        }).catch(error => {
          this.$message.error(error.message);
        })
      },
    },
  }
</script>

<style scoped>

</style>
